import React, { Component } from 'react'
import { Switch, Route, NavLink } from 'react-router-dom'
import Home from '../Home/Home.jsx'
import Cate from '../Cate/Cate.jsx'
import Mine from '../Mine/Mine.jsx'
import Shop from '../Shop/Shop.jsx'
import './Index.less'
// 引入图片
import home_select from '../../assets/img/home_select.jpeg'
import home_no from '../../assets/img/home_no.jpeg'
import cate_select from '../../assets/img/cate_select.jpeg'
import cate_no from '../../assets/img/cate_no.jpeg'
import shop_select from '../../assets/img/shop_select.jpeg'
import shop_no from '../../assets/img/shop_no.jpeg'
import mine_select from '../../assets/img/mine_select.jpeg'
import mine_no from '../../assets/img/mine_no.jpeg'
export default class Index extends Component {
    render() {
        console.log(this.props);
        let { location: { pathname } } = this.props
        return (
            <div className="index">
                {/* // 二级路由规则 */}
                <Switch>
                    <Route path="/index/cate" component={Cate}></Route>
                    <Route path="/index/shop" component={Shop}></Route>
                    <Route path="/index/mine" component={Mine}></Route>
                    <Route path="/index/home" component={Home}></Route>
                </Switch>
                {/* 底部导航1
                导航组件：Link NavLink 使用没有区别。
                    NavLink有activeClassName 属性，Link没有
                    activeClassName：高亮效果
                 */}
                {/* 底部导航 + 高亮效果*/}
                {/*  <footer className="footer">
                <NavLink activeClassName="select" to="/index/home">首页</NavLink>
                <NavLink activeClassName="select" to="/index/cate">分类</NavLink>
                <NavLink activeClassName="select" to="/index/shop">购物车</NavLink>
                <NavLink activeClassName="select" to="/index/mine">我的</NavLink> 
            </footer> */}

                {/* 带有图片的底部导航 */}
                {/* 由于路由信息都在this.props.location.pathname中解构出来 */}
                <footer className="footer">
                    <NavLink activeClassName="select" to="/index/home">
                        <img src={pathname === "/index/home" ? home_select : home_no} alt="" />
                        <span>首页</span>
                    </NavLink>
                    <NavLink activeClassName="select" to="/index/cate">
                        <img src={pathname === "/index/cate" ? cate_select : cate_no} alt="" />
                        <span>分类</span>
                    </NavLink>
                    <NavLink activeClassName="select" to="/index/shop">
                        <img src={pathname === "/index/shop" ? shop_select : shop_no} alt="" />
                        <span>购物车</span>
                    </NavLink>
                    <NavLink activeClassName="select" to="/index/mine">
                        <img src={pathname === "/index/mine" ? mine_select : mine_no} alt="" />
                        <span>我的</span>
                    </NavLink>
                </footer>
            </div>
        )
    }
}
